<!-- src/views/ActivityManagement.vue -->
<template>
  <div class="activity-management" v-if="activities.length">
    <!-- 表单和表格内容 -->
    <div v-if="showEditModal" class="modal">
      <!-- 编辑模态框内容 -->
    </div>
  </div>
  <div v-else>暂无活动数据</div>
</template>

<script>
export default {
  data() {
    return {
      activities: [], // 初始化为空数组
      newActivity: { title: '', date: '', location: '' },
      editingActivity: { title: '', description: '', date: '', location: '' },
      showEditModal: false
    };
  },
  created() {
    // 假设从 API 获取活动数据
    this.fetchActivities();
  },
  methods: {
    fetchActivities() {
      // 模拟从本地 JSON 文件获取数据
      fetch('/data/activities.json')
        .then(response => response.json())
        .then(data => (this.activities = data))
        .catch(error => console.error('加载活动数据失败:', error));
    },
    addActivity() {
      // 添加活动逻辑
    },
    editActivity(activity) {
      // 编辑活动逻辑
    },
    deleteActivity(id) {
      // 删除活动逻辑
    },
    updateActivity() {
      // 更新活动逻辑
    },
    cancelEdit() {
      this.showEditModal = false;
    },
    formatDate(date) {
      return new Date(date).toLocaleDateString();
    }
  }
};
</script>